<template>
    <el-table
      ref="tableData"
      :data="dataSource.list || []"
      :height="tableHeight"
      :stripe="options.stripe"
      :border="options.border"
      highlight-current-row
      header-row-class-name="table-header-row"
      table-layout="fixed"
      style="width: 100%"
      @current-change="handleCurrentChange"
      @row-click="handleRowClick"
    >
      <!-- 选择框 -->
      <el-table-column
        v-if="options.selectType && options.selectType == 'checkbox'"
        type="selection"
        width="50"
        fixed="left"
        align="center"
      />
      <!-- 序号 -->
      <el-table-column
        v-if="options.showIndex"
        label="序号"
        width="60"
        align="center"
      />
      <!-- 数据列 -->
      <template v-for="(column, index) in columns" :key="index">
        <template v-if="column.scopedSlots">
          <el-table-column
            :key="index"
            :prop="column.prop"
            :label="column.label"
            :align="column.align || 'left'"
            :width="column.width"
          >
            <template #default="scope">
              <slot
                :name="column.scopedSlots"
                :index="scope.$index"
                :row="scope.row"
              >
              </slot>
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column
            :key="index"
            :prop="column.prop"
            :label="column.label"
            :align="column.align || 'left'"
            :width="column.width"
            :fixed="column.fixed"
          ></el-table-column>
        </template>
      </template>
    </el-table>
    <!-- 分页 -->
    <div class="pagination" v-if="showPageination">
      <el-pagination
        v-if="dataSource.totalCount"
        background
        :total="dataSource.totalCount"
        :page-sizes="[15, 30, 50, 100]"
        :page-size="dataSource.pageSize"
        v-model="dataSource.pageNo"
        layout="total,sizes,prev,pager,next,jumper"
        @size-change="handlePageSizeChange"
        @current-change="handlePageNoChange"
        style="text-align: right"
      ></el-pagination>
    </div>
  
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";

const emit = defineEmits(["rowSelected", "rowClick"]);

const props = defineProps({
  dataSource: Object,
  showPageination: {
    type: Boolean,
    default: true,
  },
  options: {
    type: Object,
    default: {
      extHeight: 0,
      showIndex: false,
      stripe: true,
      border: false,
    },
  },
  columns: Array,
  fetch: Function, //传递数据的函数
  initFetch: {
    type: Boolean,
    default: true,
  },
});

const radioSelectRowIndex = ref(null);

// 顶部60 内容距顶部20 内容上下间距15*2 分页高度46
const topHeight = 60 + 20 + 30 + 46;

// const tableHeight = ref(
//   props.options.tableHeight
//     ? props.options.tableHeight
//     : window.innerHeight - topHeight - props.options.extHeight
// );
const tableHeight = ref(0);

const updateTableHeight = () => {
  tableHeight.value = window.innerHeight - topHeight - props.options.extHeight;
}
onMounted(()=> {
  window.addEventListener('resize',updateTableHeight);
  updateTableHeight();
})
onUnmounted(()=> {
  window.removeEventListener('resize',updateTableHeight);
})


const tableData = ref();

// 行点击
const handleRowClick = (row) => {
  emit("rowClick", row);
};

// 多选
const handleSelectionChange = (row) => {
  emit("rowSelected", row);
};

// 切换每页大小
const handlePageSizeChange = (size) => {
  props.dataSource.pageSize = size;
  props.dataSource.pageNo = 1;
  props.fetch();
};

// 页码
const handlePageNoChange = (pageNo) => {
  props.dataSource.pageNo = pageNo;
  props.fetch();
};

// 设置行选中
const setCurrentRow = (rowKey, rowValue) => {
  let row = props.dataSource.list.find((item) => {
    return item[rowKey] === rowValue;
  });
  tableData.value.setCurrentRow(row);
};
defineExpose({
  setCurrentRow,
});

const init = () => {
  if (props.initFetch && props.fetch) {
    props.fetch();
  }
};
init();
</script>

<style scoped lang="scss">
.pagination {
  padding-top: 10px;
}
.el-pagination {
  justify-content: right;
}
.el-table__body tr.current-row > td.el-table__cell {
  background-color: #f0f0f0;
}
.el-table__body tr:hover > td.el-table__cell {
  background-color: #f0f0f0 !important;
}
</style>